<template>
	<view class="drawbody flexcenter">
		<view class="drawbox flexcolumn">
			<view class="flexcolumn gginner" :style="'background-image: url(' + gginner_bg+ ')'">
				<view class="c_000 f16 textcenter mt_10 mb_10">做任务赢取抽奖次数</view>
				<!-- 转发 -->
				<view class="drawimg flexcenter">
					<image :src="`${imgPath}/upload/we/common/xxcyicon.png`" alt="" />
				</view>
				<view class="f14 c_666 mt_10 textcenter" style="padding: 20px">
					<button @click.stop="onShare" style="font-size:28rpx;"> 分享给好友，即可获得次数</button>
				</view>

				<view class="flexbetween mt_10">
					<view class="flexcenter detailbtn detailbtn2 mauto c_fff f16" @click.stop="closePop">
						继续抽奖
					</view>


				</view>
			</view>
		</view>
		<view class="zfwrapper p_20" v-if="isShow" @click="closeShow">
			<!-- 分享 <img src="@/assets/30.png" class="zfimg" alt="" /> -->
		</view>
	</view>
</template>

<script>
	// import zfshareMixin from "@/mixins/zfshare.js";
	export default {
		// mixins:[ zfshareMixin ],localStorage.getItem("loginType")
		data() {
			return {
				gginner_bg: `${uni.$http.baseUrl}/upload/we/common/gj_bg.png`,
				imgPath: uni.imgPath,
				isWeixin: true,
				loginType: "",
				isShow: false,
			};
		},
		props: {
			type: {
				default: 3,
			},
		},
		created() {

		},
		mounted() {
			console.log("imgPath", this.imgPath)
		},
		computed: {
			iswxzf() {
				return this.isWeixin && this.loginType == 1;
			},
		},
		methods: {
			// 在页面中调用分享给好友的方法
			onShare() {
				var task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				uni.share({
					title: '抽奖',
					path: `/pagesPrize/index/index?id=${task.id}`, // 分享的页面路径
					success: function(res) {
						// 分享成功回调

						uni.$http.post("/wxuser/index/forwardRecord", {
							id: task.id
						}).then(res => {
							var d = res.data;
							uni.showToast({
								title: "获取成功",
								icon: "success"
							})
							this.closePop();
						});

						console.log('分享成功', res)
					},
					fail: function(res) {
						// 分享失败回调
						uni.showToast({
							title: "分享失败",
							icon: "error"
						})
						console.log('分享失败', res)
					}
				});
			},

			copylink() {
				return
				let link = window.location.href;
				this.$copyText(link).then(
					() => {
						let task = JSON.parse(sessionStorage.getItem("taskInfo")).task;
						forwardRecord({
							id: task.id
						});
						this.closePop();
						this.$toast("链接复制成功，请到微信上粘贴");
					},
					() => {
						this.$toast("复制失败，请重新点击");
					}
				);
			},

			closePop() {
				this.$emit("close");
			},

			async openShow() {
				this.isShow = true
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				var res = await uni.$http.post("/wxuser/index/forwardRecord", {
					id: task.id
				});

			},

			closeShow() {
				this.isShow = false
			},

			wxshare() {

			}
		},
	};
</script>

<style lang="scss" scoped>
	.drawbody {
		width: 540rpx;
		padding: 40rpx;
		margin: auto;
		//background-color: #fff;
	}

	.drawbox {
		width: 540rpx;
		margin: auto;
	}

	.gginner {

		background-size: cover;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.drawimg {
		width: 416rpx;
		height: 484rpx;
		// max-height: 6.8rem;
		margin: auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		color: #76b9fe;
	}

	.detailbtn {
		width: 416rpx;
		height: 133rpx;
		border-radius: 80rpx;
		background: #418BF8;
		border: 1px solid #fff;
	}

	.detailbtn2 {
		width: 220rpx;
		height: 66rpx;
		font-size: 26rpx;
	}

	.mauto {
		margin: auto;
	}

	.zfwrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		/* Black background with 0.5 opacity */
		z-index: 9999;

		.zfimg {
			position: absolute;
			top: 30rpx;
			right: 10%;
			width: 280rpx;
			height: 230rpx;
		}
	}

	// .zfwrapper{
	//   position: absolute;
	// }
</style>